<template>
  <div class="car">
	  <li v-for="item in shoplist" :key="item.id">
	    <img :src="item.src" class="tu"/>
		<p class="title">{{item.title}}</p>
		 <p class="price">￥{{item.price}}</p> 
		 <button @click="add()">加入购物车</button>
	  </li>
	  
	
  </div>
</template>
<script>
	
	export default{
			name:'shoplist',
			data(){
				return {
					shoplist:[  { 'id': 1, 'title': '电水壶', 'price': 50.01,src: 'images/1.jpg' },
		  { 'id': 2, 'title': '电压力锅', 'price': 260.99, src: 'images/2.jpg' },
		  { 'id': 3, 'title': '电饭煲', 'price': 200.99, src: 'images/3.jpg' },
		  { 'id': 4, 'title': '电磁炉', 'price': 300.99, src: 'images/4.jpg' },
		  { 'id': 5, 'title': '微波炉', 'price': 400.99, src: 'images/5.jpg' },
		  { 'id': 6, 'title': '电饼铛', 'price': 200.99, src: 'images/6.jpg' },
		  { 'id': 7, 'title': '豆浆机', 'price': 199.99, src: 'images/7.jpg' },
		  { 'id': 8, 'title': '多用途锅', 'price': 510.99, src: 'images/8.jpg'}]
				}
			},
	}
</script>
<style>
	li{
		list-style-type:none;
		text-align:left;
		margin-top: 50px;
	}
	
	button{
		background-color: coral;
		color: white;
		border: 0px;
	}
	.price{
		color: red;
	}
	.tu{
		float: left;
	}
	
</style>